<template>
  <page class="umanage-con">
    <TitleBar title="邀请好友列表" refresh />
    <div class="ucontent">
      <div class="select-con">
        <div class="scon">
          <div class="dhead">筛选查询</div>
          <div class="dbd">
            <div class="dbd-lef">
              <div>
                <label for>用户账号：</label>
                <el-input
                  v-model="ID"
                  placeholder="用户ID/账号"
                  clearable
                  style="width: 8vw"
                  @change="searchBtn"
                />
              </div>
              <div>
                <label for>用户昵称：</label>
                <el-input
                  v-model="name"
                  placeholder="用户昵称"
                  clearable
                  style="width: 8vw"
                  @change="searchBtn"
                />
              </div>
              <div class="select-time">
                <label for>注册时间：</label>
                <!-- <input type="text" placeholder="用户等级" /> -->
                <el-date-picker
                  v-model="timeVal"
                  clearable
                  type="date"
                  placeholder="请选择注册时间"
                  value-format="yyyy-MM-dd"
                  @change="searchBtn"
                />
              </div>
            </div>
            <div class="dbd-rig">
              <a href="javascript:;" @click="search">搜索</a>
            </div>
          </div>
        </div>
      </div>
      <div />
      <!-- data-list -->
      <panel class="data-list">
        <div slot="header" class="dhead">
          <div>数据列表</div>
        </div>
        <div class="data-bd">
          <el-table
            ref="multipleTable"
            :data="queryData"
            align="center"
            style="width: 100%;margin-left:-1px"
            class="table-class"
            :header-cell-style="{
              'background-color': '#fafafa',
              'color':'#333',
              'height':'56px',
              'line-height':'56px',
              'font-size':'14px',
              'background': 'rgba(242, 242, 242, 1)'
            }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="100" align="center" />
            <el-table-column prop="user_code" label="用户ID" align="center" />
            <el-table-column prop="personal" label="用户类型" align="center" />
            <el-table-column
              prop="user_count"
              label="用户账户"
              width="180"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column prop="user_name" label="用户名" show-overflow-tooltip align="center" />
            <el-table-column prop="level_code" label="用户等级" align="center" show-overflow-tooltip />
            <el-table-column
              prop="tel"
              label="电话"
              align="center"
              width="180"
              show-overflow-tooltip
            />
            <el-table-column
              prop="phone"
              label="手机"
              width="200"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="create_time"
              label="邀请时间"
              width="200"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="create_time"
              label="注册时间"
              width="200"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column prop="gold_coin" label="可用金币" align="center" show-overflow-tooltip />
            <el-table-column
              prop="action"
              label="操作"
              show-overflow-tooltip
              align="center"
              width="150"
              fixed="right"
            >
              <template slot-scope="scope">
                <div class="action" style="height:75px;color:#488DFF;">
                  <el-button type="text" @click="gotoLink(scope.row.user_code)">编辑</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </panel>
      <!-- 分页 -->
      <pagination :pagination="pagination1" @changepage="getUser" />
    </div>
    <!-- dialog -->
    <div class="dialog">
      <el-dialog title="提示" :visible.sync="centerDialogVisible" width="844px" top="33vh" center>
        <div slot="title" class="header-title">
          <div class="lef">
            <i />
            <span v-show="title" class="title-name">{{ title }}</span>
          </div>
        </div>
        <div class="dialog-bd clearfix">
          <div id="dleft" class="dleft">
            <el-checkbox v-model="checked1" label="优选推送" />
          </div>
          <div class="dcenter">
            <el-checkbox v-model="checked2" label="推选墙" />
          </div>
          <div class="drig">
            <el-checkbox v-model="checked3" label="资源墙" />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            style="width: 100px;height: 40px;background: rgba(204, 204, 204, 1);border-radius: 2px;"
            @click="centerDialogVisible = false"
          >取 消</el-button>
          <el-button
            type="primary"
            style="width: 100px;height: 40px;background:rgba(72,141,255,1);border-radius: 2px;"
            @click="centerDialogVisible = false"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </page>
</template>
<script>
import {
  getUserList,
  getUserSearch,
  deleteTable,
  getTag,
  getPublish
} from '@/api/usermanage'
import { formatDateAndTime } from "@/utils/util.js";
export default {
  data() {
    return {
      title: '设置资源推送',
      ID: '',
      name: '',
      checked1: true,
      checked2: true,
      checked3: true,
      checked: true,
      msg: '',
      queryData: [], // 表格数据
      multipleSelection: [],
      // select
      options: [
        {
          label: '正序'
        }
      ],
      msgPush: [
        {
          label: '优选推送',
          value: '0001'
        },
        {
          label: '推选墙',
          value: '0002'
        },
        {
          label: '资源墙',
          value: '0003'
        }
      ],
      tagValue: [],
      tagsList: [],
      props: {
        multiple: true
        // value: "tagCode",
        // label: "tagName"
      },
      bars: [
        {
          label: '3条一页'
        }
      ],
      // select下拉框
      showVal: [],
      showBar: '',
      showTag: '',
      showSort: '',
      // timepicker
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      timeVal: '', // time
      value2: '',
      centerDialogVisible: false, // dialog
      deldialogVisible: false, // 删除对话框
      delarr: [], // 存放删除的数据,
      pagination1: {}
    }
  },
  created() {
    this.getUser()
    this.getTagList()
  },
  methods: {
    getUser(pageNum = 1) {
      getUserSearch({
        pageNum,
        pageSize: 3,
        userCode: this.ID,
        createTime: this.timeVal,
        userName: this.name
      }).then(res => {
        res.data.list.forEach(item => {
          item.create_time = formatDateAndTime(item.create_time)
        })
        this.queryData = res.data.list
        // 判断用户等级
        for (let i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].level_code === '0') {
            res.data.list[i].level_code = '青铜'
          }
          if (res.data.list[i].level_code === '1') {
            res.data.list[i].level_code = '白银'
          }
          if (res.data.list[i].level_code === '2') {
            res.data.list[i].level_code = '黄金'
          }
          if (res.data.list[i].level_code === '3') {
            res.data.list[i].level_code = '铂金'
          }
          if (res.data.list[i].level_code === '4') {
            res.data.list[i].level_code = '钻石'
          }
          if (res.data.list[i].level_code === '5') {
            res.data.list[i].level_code = '王者'
          }
          if (res.data.list[i].state === '0') {
            res.data.list[i].state = false
          } else {
            res.data.list[i].state = true
          }
        }
        // 判断类型
        for (var i = 0, state; i < res.data.list.length; i++) {
          if (res.data.list[i].personal === 'b') {
            res.data.list[i].personal = '企业'
          }  else if (res.data.list[i].personal === 's') {
            res.data.list[i].personal = '个人'
          }
        }
        
        this.pagination1 = res.data
      })
    },
    // 获取tag标签
    getTagList() {
      getTag().then(res => {
        console.log(res)
        this.tagsList = res.data.map(item => ({
          value: item.tagCode,
          label: item.tagName
        }))
        // console.log(this.tagsList);
      })
    },
    tagBtn() {
      console.log(this.tagValue)
    },
    // switch
    changeSwitch(row) {
      console.log(row)
    },
    currentSel(val) {
      console.log(this.showVal)
    },

    subBtn() {
      if (this.showVal && this.multipleSelection[0].user_code) {
        console.log(this.multipleSelection[0].user_code)
        getPublish([
          {
            publishCode: this.showVal,
            userCode: this.multipleSelection[0].user_code
          }
        ]).then(res => {
          console.log(res)
          this.showVal = ''
          this.$refs.multipleTable.clearSelection()
          this.$message({
            message: '恭喜你，推送成功',
            type: 'success'
          })
        })
      } else {
        this.$message({
          message: '推送失败',
          type: 'error'
        })
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    search() {
      // getUserSearch({
      //   userCode: this.ID,
      //   createTime: this.timeVal,
      //   userName: this.name
      // }).then(res => {
      //   console.log(res);
      // });
      this.getUser();
    },
    searchBtn() {
      if (this.ID === "" && this.timeVal === "" && this.name === "") {
        this.getUser();
      }
    },
    // 添加用户
    goAddUser() {
      this.$router.push({
        name: "addUser"
      });
    },
    // 页面跳转
    gotoLink(code) {
      this.$router.push({
        name: 'User-detail',
        query: {
          code: code
        }
      })
    }
  }
}
</script>

<style lang="scss" scope>
.umanage-con {
  // padding-left: 26px;
  width: 100%;
  padding: 0 110px 0 26px;
  margin: 16px 0;
  .dashboard-text {
    margin-top: 17px;
    // width: 1517px;
    width: 100%;
    height: 37px;
    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
    }
  }
  .ucontent {
    min-height: 1000px;
    .select-con {
      // width: 1517px;
      // height: 150px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
      border-radius: 4px;
      margin-bottom: 30px;
      .scon {
        padding: 25px 0 0 29px;
        .dhead {
          // width: 1463px;
          height: 60px;
          font-size: 16px;
          padding-right: 24px;
          font-family: PingFang-SC-Medium;
          font-weight: bold;
          color: #333333;
          border-bottom: 1px solid rgba(242, 242, 242, 1);
        }
        .dbd {
          width: 100%;
          display: flex;
          padding: 24px 23px 24px 29px;
          .dbd-lef {
            display: flex;
            flex: 5;
            >div {
              margin-right: 30px;
              label {
                color: rgba(51, 51, 51, 1);
              }
            }
            p {
              float: left;
              margin: 0;
              label {
                color: rgba(51, 51, 51, 1);
              }
            }
            p:nth-child(2) {
              margin: 0 60px;
            }
            input[type="text"] {
              // width: 240px;
              height: 40px;
              border: 1px solid rgba(204, 204, 204, 1);
              border-radius: 2px;
              color: #999;
              padding-left: 11px;
            }
          }
          .dbd-rig {
            // float: right;
            // position: relative;
            z-index: 10;
            a {
              display: block;
              width: 100px;
              height: 40px;
              background: rgba(72, 141, 255, 1);
              border-radius: 2px;
              color: #fff;
              text-align: center;
              line-height: 40px;
              margin-left: 80px;
              cursor: pointer;
            }
          }
        }
      }
    }
    //   data-list
    .data-list {
      // width: 1517px;

      .dhead {
        // width: 1463px;

        p {
          float: left;
        }
      }
      .dh-bt {
        height: 40px;
        margin: 26px 0;
        li {
          float: left;
          list-style: none;
          width: 106px;
          height: 40px;
          line-height: 40px;
          color: #fff;
          margin-right: 40px;
          background: rgba(72, 141, 255, 1);
          border-radius: 1px;
          text-align: center;
          cursor: pointer;
        }
        .abg {
          width: 124px;
          height: 40px;
          color: #999;
          background: #fff;
          position: relative;
        }
      }
      .data-bd {
        height: auto;
        margin-bottom: 40px;
        padding-bottom: 30px;
        .el-checkbox__inner {
          width: 24px !important;
          height: 24px !important;
        }
        .el-checkbox__inner.is-indeterminate .el-checkbox__inner::before {
          top: 10px !important;
        }
        .action {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
    //   分页
    .pagination-block {
      // width: 1517px;
      height: 40px;
      margin-top: 30px;
      position: relative;
    }
  }
  .dialog {
    .header-title {
      height: 56px;
      overflow: hidden;
      // background: #ccc;
      .lef {
        float: left;
        line-height: 37px;
        font-size: 16px;
        font-weight: 900;
        color: #333;
        i {
          float: left;
          margin-top: 8.5px;
          width: 11px;
          height: 20px;
          background: rgba(72, 141, 255, 1);
          border-radius: 4px;
          margin-right: 12px;
        }
      }
    }
    .dialog-bd {
      margin: 30px 141px 54px 112px;
      div {
        float: left;
        width: 170px;
        height: 150px;
        font-size: 14px;
        .el-checkbox {
          // background: red;
          .el-checkbox__input {
            line-height: 2;
            .el-checkbox__inner {
              display: inline-block;
              position: relative;
              border: 1px solid #dcdfe6;
              border-radius: 2px;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              width: 24px !important;
              height: 24px !important;
              background-color: #fff;
              &:after {
                width: 6px;
                height: 14px;
                left: 7px;
                border-width: 2px;
              }
            }
          }
        }
        .el-checkbox__input.is-checked .el-checkbox__inner,
        .el-checkbox__input.is-indeterminate .el-checkbox__inner {
          background-color: #409eff;
          border-color: #409eff;
        }
      }
    }
  }
  .test {
    width: 100px;
    height: 100px;
    background: #333;
    margin: 0 auto;
    z-index: 100;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    left: 50%;
  }
}
</style>

